<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/animate.css">
    <title>Document</title>
    <style>
        .btn{
            border: none;
            outline: none;
            padding: 15px 25px;
            margin: 0 15px;
            background: #999;
            color: #F50;
            border-radius: 20px;
            font-size: 20px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}} </h2>
        <button class="btn" v-shuibowen="bg1">立即登录</button>
        <button class="btn" v-shuibowen="'#ccc'">立即注册</button>
    </div>

    <script>
        Vue.directive('shuibowen',{
            bind(el,binding){
                el.addEventListener('click',function(e){
                    var e = e || window.event
                    var x = e.clientX - el.offsetLeft;
                    var y = e.clientY - el.offsetTop;
                    console.log(x,y)

                    var span = document.createElement('span')
                    span.style.position = 'absolute'
                    span.style.background = binding.value || 'rgba(0,0,0,.5)'
                    span.style.opacity = 1
                    span.style.borderRadius = '50%'

                    el.append(span)
                    var width = 0;
                    var height = 0;
                    var opacity = 1;
                    var maxWidth = el.clientWidth;
                    var timer = setInterval(()=>{
                        width += 5;
                        height += 5;
                        opacity -= 0.05;
                        if(width<maxWidth){
                            span.style.width = width+'px'
                            span.style.height = height+'px'
                            span.style.opacity = opacity;
                            span.style.left = x - span.clientWidth/2 + 'px'
                            span.style.top = y - span.clientHeight /2 + 'px'
                        }else{
                            clearInterval(timer)
                            timer=null;
                            span.remove()
                        }

                    },15)

                })
            },
            inserted(el,binding){

            }
        })
        const vm = new Vue({
            data:{
                title:"Vue 自定义水波纹",
                bg1:'#fff'

            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title
            }
        }).$mount('#app')
    </script>
</body>
</html>